<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Expenses-userinfo</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="format-detection" content="email=no,address=no,telephone=no" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" />
<script type="text/javascript" src="../js/zepto.min.js"></script>
<script type="text/javascript" src="../js/mediaFize.js"></script>
<script type="text/javascript" src="../js/util.js"></script>
<script type="text/javascript" src="../js/swiper-3.4.0.min.js"></script>
<script type="text/javascript" src="../js/weui.min.js"></script>
<script type="text/javascript" src="../js/echarts.js"></script>
<script type="text/javascript" src="../js/timer.js"></script>
<link type="text/css" rel="stylesheet" href="../css/home.css" />
<link type="text/css" rel="stylesheet" href="../css/swiper-3.4.0.min.css" />
<link type="text/css" rel="stylesheet" href="../css/weui.min.css" />
<style>
	.user_info_bg{
        width:100%;
        margin:20px auto;
        position:relative;
        padding:20px;
    }
    .title{
    	font-size: 22px;
    	font-weight: bold;
    	text-align: center;
    	margin-bottom: 20px;
    }
    .user_info_bg > ul >li {
       position:relative;
        list-style:none;
        height:25px;
        overflow:hidden;
    }
    /*文字自下而上出现*/
    .item >div{
        position: absolute;
        height:18px;
        top: 25px;
        animation:textToTop 0.2s linear;
        -webkit-animation:textToTop 0.2s linear;

        animation-fill-mode:forwards;
        -webkit-animation-fill-mode:forwards;
        -moz-animation-fill-mode:forwards;
    }


    .item:nth-child(2) >div {
        animation-delay:2s;
    }
    .item:nth-child(3) >div {
        animation-delay:4s;
    }
    .item:nth-child(4) >div {
        animation-delay:6s;
    }
    .item:nth-child(5) >div {
        animation-delay:8s;
    }
    /*文字上色*/
    .item >div::before{
        content:attr(data-letters);
        position:absolute;
        width:0;
        z-index:2;
        color:orange;
        overflow:hidden;
        white-space: nowrap;
        animation:textToColor 1.2s linear;
        animation-fill-mode:forwards;
        -webkit-animation-fill-mode:forwards;
        -moz-animation-fill-mode:forwards;
    }

    .item:nth-child(2) >div::after,
    .item:nth-child(2) >div::before{
        animation-delay: 2.5s;
    }
    .item:nth-child(3) >div::after,
    .item:nth-child(3) >div::before{
        animation-delay: 4.5s;
    }
    .item:nth-child(4) >div::after,
    .item:nth-child(4) >div::before{
        animation-delay: 6.5s;
    }
    .item:nth-child(5) >div::after,
    .item:nth-child(5) >div::before{
        animation-delay: 8.5s;
    }
      /*文字下方的下划线*/
    .item >div::after{
        content:'';
        width:0;
        position:absolute;
        bottom:-7px;
        left:0;
        height:2px;
        background:orange;
        animation:textLine 1.2s linear;
        animation-fill-mode:forwards;
        -webkit-animation-fill-mode:forwards;
        -moz-animation-fill-mode:forwards;
    }


    /*文字自下而上出现*/

    @keyframes textToTop{

        0%{
            top:25px;
        }
        100%{
            top:0;
        }
    }

    /*文字上色*/

    @keyframes textToColor{
        0%{
            width:0;
        }
        100%{
            width:100%;
        }
    }
    /*文字下方的下划线*/
    @keyframes textLine {
        0% {
            width: 0;
        }
        100% {
            width: 100%;
        }
    }
</style>
</head>
<body>
<div id="pageSwaper">
	<div class="user_info_bg">
		<p class="title">关于我们</p>
	    <ul>
	        <li class="item"><div data-letters="我们是2002室">我们是2002室</div></li>
	        <li class="item"><div data-letters="在魔都心怀梦想">在魔都心怀梦想</div></li>
	        <li class="item"><div data-letters="我们是一群可爱的孩纸">我们是一群可爱的孩纸</div></li>
	        <li class="item"><div data-letters="希望世界和平">希望世界和平</div></li>
	    </ul>
	</div>	
</div>
<script>
	$(function(){
		$(".user_footer>ul>li").on("click",function(){
			var index=$(this).index();
			if(index==0){
				window.location.href="index.html";
			}else if(index==1){
				window.location.href="total.html";
			}
		})
	});
</script>
</body>
</html>
